<template>
    <canvas :id="id"></canvas>
</template>
<script>
    export default {
        name: 'wiocWater',
        props: {
            color: {
                type: Array,
                default() {
                    return ['rgba(198, 237, 251, 0.4)', 'rgba(198, 237, 251, 0.2)', 'rgba(198, 237, 251, 0.1)']
                }
            },
            max:{
                type:Number,
                default:.14
            },
            min:{
                type:Number,
                default:.12
            },
            id:{
                type:String,
                default:'water'
            }

        },
        data() {
            return {

            };
        },
        mounted(){
            // 兼容的requestAnimationFrame函数
            let requestAnimationFrame = (function () {
                return window.requestAnimationFrame || webkitRequestAnimationFrame || mozRequestAnimationFrame || function (
                    callback) {
                    window.setTimeout(callback, 1000 / 60);
                }
            })();

            // 封装设置canvas大小的函数
            let setCanvasSize = function () {
                canvas.width = canvas.parentNode.offsetWidth;
                canvas.height = canvas.parentNode.offsetHeight;
            }

            // 获取canvas相关
            let canvas = document.querySelector('#'+this.id);
            let ctx = canvas.getContext('2d');
            setCanvasSize()
            // 一些变量
            let boHeight = canvas.height - canvas.height * this.max; // 顶峰高度
            let posHeight = canvas.height - canvas.height * this.min; // 最低高度
            let step = 0; // 初始角度
            let colors = this.color;

            // 绘制函数
            let paint = function () {
                ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
                step += 1; // 角度
                if(step == 360){
                    step = 0
                }
                
                // 遍历colors数组，进行绘制
                colors.forEach((item, index) => {
                    ctx.fillStyle = item; // 画笔的颜色
                    let angle = (step + index * 1) * Math.PI / 180; // 相差的角度
                    let deltaHeight = Math.sin(angle) * 10; // 线条左边的起点
                    let deltaHeightRight = Math.cos(angle) * 10; //线条右边的终点
                    ctx.beginPath(posHeight + deltaHeight);
                    ctx.moveTo(0, posHeight + deltaHeight);
                    ctx.bezierCurveTo(canvas.width / 2, posHeight + deltaHeight, 
                            canvas.width / 2, posHeight +deltaHeightRight , 
                            canvas.width, posHeight + deltaHeightRight); // 绘制贝塞尔曲线
                    ctx.lineTo(canvas.width, canvas.height); // 防止右侧出现空隙
                    ctx.lineTo(0, canvas.height); // 防止左侧出现空隙
                    ctx.closePath();
                    ctx.fill();
                })

                requestAnimationFrame(paint); // 自调
            }

            // 调用绘制函数
            paint();

            // 响应式
            window.onresize = setCanvasSize;
        }
    }
</script>

<style lang="less" scoped>

</style>
